<template>
  <el-drawer title="编辑" :visible="visible" direction="rtl" :wrapperClosable="false"
             :close-on-press-escape="false" :show-close="false">
    <el-row style="height: calc(100% - 42px);" v-if="isRender">
      <ele-form
          v-model="formData"
          v-bind="$attrs"
          :requestFn="requestFn"
          @request-success="handleRequestSuccess"
          @request-error="handleRequestError"
          ref="ele-form"
          label-position="right">
        <div slot="form-btn"></div>
      </ele-form>
    </el-row>
    <el-row style="height: 42px;text-align: right;border-top: 1px solid #e4e7ed;padding-top: 10px;">
      <el-button size="small" type="primary" icon="el-icon-check" @click="addSave">保存</el-button>
      <el-button size="small" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
      <el-button size="small" type="danger" icon="el-icon-close" @click="$emit('close')">关闭</el-button>
    </el-row>
  </el-drawer>

</template>

<script>
import mixins from "../lib/mixins";
import request from "../../../../utils/request";

export default {
  name: "editFormDrawer",
  mixins: [mixins],
  props: {
    visible: Boolean,
    urlQueryById: String,
    updateUrl: String,
    rowData: Object,
    idProp: String
  },
  data() {
    return {
      formData: {},
      isRender: false
    }
  },
  methods: {

    resetForm() {
      this.getEleForm().resetForm();
    },
    addSave() {
      this.getEleForm().handleSubmitForm();
    },
    //
    requestFn(data) {
      // 伪代码
      return new Promise(async (resolve, reject) => {
        try {
          resolve()
        } catch (error) {
          // 经过一系列操作
          reject(new Error({title: '标题不得超过5个字', content: '内容不得为空'}))
        }
      })
    },
    // 成功后的进一步处理
    handleRequestSuccess() {
      this.$message.success('创建成功1111')
    },
    // 失败后的进一步处理（内部已经有提示）
    handleRequestError() {
      this.$message.error('创建成功')
    },
  },
  watch: {
    visible(val) {
      if (val) {
        //初始化
        const url = this.urlQueryById || "/query/one/"
        // console.log(this.rowData)
        if (this.urlQueryById) {
          request({
            url: `${url}/${this.rowData[this.idProp]}`,
            method: 'get',
          }).then(data => {
            const resData = data.data
            Object.keys(this.rowData).forEach(key => {
              if (resData[key]) {
                this.formData[key] = resData[key] || null
              }
            })
            // console.log(this.formData)
            this.isRender = true
          })
        }
      }
      else{
        this.isRender = false
      }
    }
  }
}
</script>

<style scoped>

</style>